<template>

  <!-- 工具栏部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="新增目录"
                    placement="top-start"
            >
                <el-button @click="toAddDirectory" type="primary">
                    <el-icon>
                        <Plus/>
                    </el-icon>
                </el-button>
            </el-tooltip>
            <el-button @click="editBtnHandler" :disabled="editBtnDisabled" type="primary">
                <el-icon>
                    <EditPen/>
                </el-icon>
            </el-button>

        </el-col>
    </el-row>
  <!-- 工具栏部分结束 -->
  <!-- 列表部分开始 -->
    <el-row style="margin-top: 10px;">
        <el-col :span="24">
            <el-table ref="menuTable"
                      row-key="id"
                      :data="menus" border :stripe="true"
                      style="width: 95%">
                <el-table-column prop="id" label="#"/>
                <el-table-column prop="icon" label="图标">
                    <template #default="scope">
                        <QdIcon :name="scope.row.icon"/>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="菜单名称"/>
                <el-table-column prop="title" label="菜单标题"/>
                <el-table-column prop="path" label="路由"/>
                <!-- 行工具栏 -->
                <el-table-column width="200" label="操作">
                    <template #default="scope">
                        <el-button type="primary" @click="toAddMenu(scope.row.menuId)" size="small">添加</el-button>
                        <el-button type="primary" @click="toEditMenu(scope.row.menuId)" size="small">编辑</el-button>
                        <el-popconfirm confirm-button-text="是" cancel-button-text="否"
                                       @confirm="deleteMenu(scope.row.menuId)" title="您确定要删除这个菜单信息吗？">
                            <template #reference>
                                <el-button type="danger" size="small">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
  <!-- 列表部分结束 -->


  <!-- 使用子组件 -->
</template>

<script>
import QdIcon from '../../../components/qd-icom.vue';
// 引入api
import HomeRequest from "../../../api/home.js";

export default {
    components: {
        QdIcon
    },
    name: "dict.vue",
    data() {
        return {
            menus:[],// 所有菜单列表

            editBtnDisabled:true,// 编辑按钮是否禁用
        }
    }, methods: {
        /**
         * 工具栏新增目录按钮事件
         */
        toAddDirectory(){

        },
        /**
         * 加载所有菜单
         */
        loadMenus(){
            HomeRequest.getMenuList(res=>{
                console.log(res)
                this.menus = res.data;
            });
        },
        /**
         * 工具栏编辑按钮事件
         */
        editBtnHandler(){

        },
        /**
         * 表格中数据选择事件
         */
        handleSelectionChange(){

        },
        /**
         * 行新增按钮事件
         * @param menuId
         */
        toAddMenu(menuId){

        },
        /**
         * 行编辑按钮事件
         * @param menuId
         */
        toEditMenu(menuId){

        },
        /**
         * 行删除按钮事件
         * @param menuId
         */
        deleteMenu(menuId){

        },
    }, mounted() {
        this.loadMenus();
    }
}
</script>

<style scoped>

</style>